<template>
  <div class="limitdiv">
    <div style="margin: 20px;"></div>
    <el-form
      :label-position="labelPosition"
      label-width="95px"
      :rules="rules"
      ref="managers"
      class="demo-ruleForm"
      :model="managers"
    >
      <el-form-item label="管理员ID">
        <el-input v-model="managers.managerId" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="管理员密码" prop="managerPw">
        <el-input v-model="managers.managerPw" disabled=""></el-input>
      </el-form-item>
      <el-form-item label="管理员姓名" prop="managerName">
        <el-input v-model="managers.managerName"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="managerPhone">
        <el-input v-model="managers.managerPhone"></el-input>
      </el-form-item>
      <el-form-item label="管理员权限" prop="managerPow">
        <el-input v-model="managers.managerPow"></el-input>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="submitForm('managers')">确认修改</el-button>
        <el-button type="primary" @click="turnback" plain>返 回</el-button>
        <!-- <el-button @click="resetForm('managers')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      managers: {
        managerId: "123",
        managerPw: "123",
        managerName: "123",
        managerPhone: "123",
        managerPow: "0"
      },
      rules: {
        managerName: [
          { required: true, message: "请输入管理员姓名", trigger: "blur" }
        ],
        managerPhone: [
          { required: true, message: "请输入访客联系方式", trigger: "blur" },
          {
            pattern:
              "^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\\d{8}$",
            message: "仅支持中国大陆手机号"
          }
        ],
        managerPw: [
          { required: true, message: "请输入管理员密码", trigger: "blur" }
        ],
        managerPow: [
          { required: true, message: "请输入管理员权限", trigger: "blur" },
          {
            pattern: "^[0-4]$",
            message:
              "0:一般管理员(访客登记表)，1:派工管理员(工人信息，派工，维修，安全检查)，2:收费管理员(业主缴费管理)，3:业主管理员(业主登记，信息发布)，4:最高管理员(所有权限)"
          }
        ]
      }
    };
  },
  created() {
    this.managers.managerId = this.$route.query.id;
    this.axios
      .post(
        "managers/detailmanagers?managersId=" +
          this.managers.managerId
      )
      .then(res => {
        this.managers = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.managers); //访客数据
          this.axios
            .post("managers/a&dmanagers", this.managers)
            .then(res => {
              if (res.data == "success") {
                this.$alert("修改成功！", {
                  confirmButtonText: "确定",
                  callback: action => {
                    this.$router.push("/index_manager/managerhead");
                  }
                });
              } else {
                this.$alert("修改失败！", {
                  confirmButtonText: "确定"
                });
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    turnback() {
      this.$router.push("managerhead/showmanager");
    }
  },
  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
</style>
